<template>
	<view class="max-box">
		<image src="/static/images/merchantSettled.png" class="merchant-image" mode=""></image>
		<view class="merchant-content">
			<u--form labelPosition="left" labelWidth="80" :model="uForm" :rules="rules" ref="uForm">
				<u-form-item label="姓名" prop="uForm.name" borderBottom>
					<u--input v-model="name" placeholder="请输入商家名称" border="none"></u--input>
				</u-form-item>
				<u-form-item label="主营类目" prop="uForm.name" borderBottom @click="categories = true;">
					<u--input v-model="name" disabled disabledColor="#ffffff" placeholder="请输入商家名称"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
					<u-picker :show="categories" :columns="categoriesChoose" @close="categories = false"
						@cancel="categories = false"></u-picker>
				</u-form-item>
				<u-form-item label="联系人姓名" prop="uForm.name" borderBottom>
					<u--input v-model="name" placeholder="请输入联系人姓名" border="none"></u--input>
				</u-form-item>
				<u-form-item label="手机号码" prop="uForm.name" borderBottom>
					<u--input v-model="name" placeholder="请输入手机号码" border="none"></u--input>
				</u-form-item>
				<u-form-item label="验证码" prop="uForm.name" borderBottom>
					<u--input v-model="name" disabled disabledColor="#ffffff" placeholder="请输入商家名称"
						border="none"></u--input>
					<view class="get-verification-code" slot="right">获取验证码</view>
					<u-toast ref="uToast"></u-toast>
				</u-form-item>
				<u-form-item label="创建账号" prop="uForm.name" borderBottom>
					<u--input v-model="name" placeholder="请设置登录账号(可用手机号代替)" border="none"></u--input>
				</u-form-item>
				<u-form-item label="设置密码" prop="uForm.name" borderBottom>
					<u--input v-model="name" placeholder="请设置登录密码" border="none"></u--input>
				</u-form-item>
				<u-form-item label="营业执照" prop="uForm.name" borderBottom>
					<u--input v-model="name" placeholder="请上传营业执照及行业相关资质证明" border="none"></u--input>
				</u-form-item>
				<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="1" multiple
					:maxCount="10"></u-upload>
				<view class="upload-font">支持jpg、png、jpeg格式的图片,最多可上传10张</view>
				<view class="agreement">
					<u-checkbox-group>
						<u-checkbox v-model="checked" shape="circle" label="已阅诗并同意"></u-checkbox>
					</u-checkbox-group>
					<text class="occupancy-agreement">《入驻协议》</text>
				</view>
				<button class="submit">提交申请</button>
				<view class="history">
					<u-icon name="order" color="rgb(146, 146, 146)" size="28"></u-icon>
					<text>查看提交记录</text>
				</view>
			</u--form>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 表单数据
				uForm: {
					name: '',
				},
				// 表单校验
				rules: {

				},
				// 控制性别选择框显示与隐藏
				categories: false,
				// 性别选择器数据
				categoriesChoose: [
					['艺术品', '鞋包', '服饰', '美妆', '数码']
				],
				// 上传图片绑定数据
				fileList: [],
				// 单选框数据
				radiolist1: [{
					name: '已阅读并同意',
					disabled: false
				}, ],
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.max-box {
		background-color: rgb(246, 110, 99);
		padding-bottom: 20rpx;
	}

	.merchant-image {
		width: 100%;
		height: 350rpx;
	}

	.merchant-content {
		margin: 20rpx;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.main-categories {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.agreement {
		margin-top: 20rpx;
		display: flex;
		align-items: center;
	}

	.upload-font {
		font-size: 30rpx;
		color: rgb(146, 146, 146);
	}

	.radio-box {
		width: 100rpx;
	}

	.occupancy-agreement {
		color: red;
	}

	.submit {
		margin-top: 20rpx;
		background-color: rgb(255, 44, 60);
		border-radius: 40rpx;
		color: white;
	}

	.history {
		margin-top: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: rgb(146, 146, 146);
	}

	.get-verification-code {
		border: 1px solid red;
		background-color: #fff;
		color: red;
		padding: 10rpx 30rpx 10rpx 30rpx;
		border-radius: 40rpx;
	}
</style>